<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本插值</title>
</head>
<body>
<div id="div">
    <div>{{msg}}</div><!--像这种普通的插值表达式是无法解析标签的-->
    <div v-html="msg"></div><!--而这种v-html="msg"的指令的形式为该标签添加一个属性就可以解析，
    v-html是vue的指令所以尽管这里的msg是字符串，但是他会去vue的数据区区去找对应的变量，然后展示值，这种做法的前提是便前提不自带value
    如果带了value属性，那就要换一个指令v-bind:value=""，要给这个自带的value属性绑定一个值，差不多就是接管这个value属性的意思，然后，再将这个变量名赋值给这个属性，就能实现和之前一样的效果了-->
   <!-- <input v-bind:value="msg"/>-->
    <!--插值表达式中可以放变量，也支持运算符,算术，比较，三元都可以-->
   {{1>2}}<!--false-->
    {{1-2}}<!-- -1 -->
    {{1<2?"黄金标":"贾队长"}}<!--黄金标-->

</div>
</body>
<script src="js/vuejs-2.5.16.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            msg:"<b>黑马黄金标</b>"
        }
    });
</script>
</html>